<template>
  <view
    class="tui-list-class tui-list-cell"
    :class="[
      arrow ? 'tui-cell-arrow' : '',
      arrow && arrowRight ? '' : 'tui-arrow-right',
      unlined ? 'tui-cell-unlined' : '',
      lineLeft ? 'tui-line-left' : '',
      lineRight ? 'tui-line-right' : '',
      arrow && arrowColor ? 'tui-arrow-' + arrowColor : '',
      radius ? 'tui-radius' : '',
    ]"
    :hover-class="hover ? 'tui-cell-hover' : ''"
    :style="{
      backgroundColor: backgroundColor,
      fontSize: size + 'rpx',
      color: color,
      padding: padding,
    }"
    :hover-stay-time="150"
    @tap="handleClick"
  >
    <slot />
  </view>
</template>

<script>
  export default {
    name: 'TuiListCell',
    props: {
      // 是否有箭头
      arrow: {
        type: Boolean,
        default: false,
      },
      // 箭头颜色 传值： white，gray,warning,danger
      arrowColor: {
        type: String,
        default: '',
      },
      // 是否有点击效果
      hover: {
        type: Boolean,
        default: true,
      },
      // 隐藏线条
      unlined: {
        type: Boolean,
        default: false,
      },
      // 线条是否有左偏移距离
      lineLeft: {
        type: Boolean,
        default: true,
      },
      // 线条是否有右偏移距离
      lineRight: {
        type: Boolean,
        default: false,
      },
      padding: {
        type: String,
        default: '26rpx 30rpx',
      },
      // 背景颜色
      backgroundColor: {
        type: String,
        default: '#fff',
      },
      // 字体大小
      size: {
        type: Number,
        default: 28,
      },
      // 字体颜色
      color: {
        type: String,
        default: '#333',
      },
      // 是否加圆角
      radius: {
        type: Boolean,
        default: false,
      },
      // 箭头是否有偏移距离
      arrowRight: {
        type: Boolean,
        default: true,
      },
      index: {
        type: Number,
        default: 0,
      },
    },
    methods: {
      handleClick() {
        this.$emit('click', {
          index: this.index,
        });
      },
    },
  };
</script>

<style scoped>
  .tui-list-cell {
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  .tui-radius {
    border-radius: 6rpx;
    overflow: hidden;
  }

  .tui-cell-hover {
    background-color: #f1f1f1 !important;
  }

  .tui-list-cell::after {
    content: '';
    position: absolute;
    border-bottom: 1px solid #eaeef1;
    -webkit-transform: scaleY(0.5) translateZ(0);
    transform: scaleY(0.5) translateZ(0);
    transform-origin: 0 100%;
    bottom: 0;
    right: 0;
    left: 0;
    pointer-events: none;
  }

  .tui-line-left::after {
    left: 30rpx !important;
  }

  .tui-line-right::after {
    right: 30rpx !important;
  }

  .tui-cell-unlined::after {
    border-bottom: 0 !important;
  }

  .tui-cell-arrow::before {
    content: ' ';
    height: 10px;
    width: 10px;
    border-width: 2px 2px 0 0;
    border-color: #c0c0c0;
    border-style: solid;
    -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 30rpx;
  }

  .tui-arrow-right::before {
    right: 0 !important;
  }

  .tui-arrow-gray::before {
    border-color: #666 !important;
  }

  .tui-arrow-white::before {
    border-color: #fff !important;
  }

  .tui-arrow-warning::before {
    border-color: #ff7900 !important;
  }

  .tui-arrow-success::before {
    border-color: #19be6b !important;
  }

  .tui-arrow-danger::before {
    border-color: #eb0909 !important;
  }
</style>
